import React from 'react';
import type { RiskAssociationStats } from '@/types/work';
import { useBusiness } from '@/stores/useBusinessStore';
import { getAssessmentTypeName } from '@/utils/utils';

interface RiskAssuranceHeaderProps {
  stats: RiskAssociationStats;
}

/**
 * 风险-保障关联管理页面头部组件
 * 显示统计信息和页面标题
 */
const RiskAssuranceHeader: React.FC<RiskAssuranceHeaderProps> = ({ stats }) => {
  const { totalRisks, associatedRisks, totalAssociations } = stats;
  
  // 获取当前选中的业务系统
  const { selectedBusiness } = useBusiness();
  
  const businessTitle = selectedBusiness 
    ? `${selectedBusiness.name} - ${getAssessmentTypeName(selectedBusiness.assessmentType)}`
    : '风险-保障关联管理';
  
  // 计算关联覆盖率
  const coverageRate = totalRisks > 0 
    ? Math.round((associatedRisks / totalRisks) * 100) 
    : 0;
  
  return (
    <div className="bg-card rounded-lg shadow-sm p-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-foreground">{businessTitle}</h1>
          <p className="text-muted-foreground mt-1">
            管理高中风险项与保障项之间的关联关系，提高风险覆盖率
          </p>
        </div>
        
        <div className="flex flex-wrap gap-4">
          <div className="bg-background rounded-md p-3 min-w-[120px]">
            <p className="text-sm text-muted-foreground">高中风险项</p>
            <p className="text-2xl font-bold text-foreground">{totalRisks}</p>
          </div>
          
          <div className="bg-background rounded-md p-3 min-w-[120px]">
            <p className="text-sm text-muted-foreground">已关联风险项</p>
            <p className="text-2xl font-bold text-primary">{associatedRisks}</p>
          </div>
          
          <div className="bg-background rounded-md p-3 min-w-[120px]">
            <p className="text-sm text-muted-foreground">风险关联数</p>
            <p className="text-2xl font-bold text-primary">{totalAssociations}</p>
          </div>
          
          <div className="bg-background rounded-md p-3 min-w-[120px]">
            <p className="text-sm text-muted-foreground">高中风险覆盖率</p>
            <div className="flex items-center gap-2">
              <p className="text-2xl font-bold text-foreground">{coverageRate}%</p>
              <div className="w-16 h-2 bg-muted rounded-full overflow-hidden">
                <div 
                  className="h-full bg-primary" 
                  style={{ width: `${coverageRate}%` }}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RiskAssuranceHeader;
